{% extends "index.html" %}
{% block MyCss %}
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <style>
        /* 模态框背景板 */
        #modality {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, .5);
            z-index: 1000;
        }

        /* 模态框主体 */
        #modality-body {
            position: fixed;
            height: 500px;
            width: 800px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #ffffff;
            border-radius: 25px;
        }
    </style>
{% endblock MyCss %}
{% block Mybody %}
    <div style="width: 50%;">
        <form method="post">

            {% csrf_token %}
            <div class="form-group">
                <label for="hostalias">主机名称(别名)</label>
                <input type="text" class="form-control" id="hostalias" name="hostalias" placeholder="hostalias">
            </div>
            <div class="input-group">
                <div class="input-group-addon">ssh:</div>
                <input type="text" class="form-control" name="ip" placeholder="127.0.0.1">
                <div class="input-group-addon">username:</div>
                <input type="text" class="form-control" name="username" placeholder="host">
                <div class="input-group-addon">port</div>
                <input type="number" class="form-control" name="port" placeholder="22" value="22">
            </div>
            <div class="radio">
                <label>
                    <input type="radio" name="mode" value="0" checked>
                    密码
                </label>
                <label>
                    <input type="radio" name="mode" value="1">
                    密钥
                </label>
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="text" class="form-control" id="password" placeholder="password">
            </div>
            <input type="submit">
        </form>
    </div>
    <div>
        <table class="table table-condensed">
            <thead>
            <tr>
                <th>#</th>
                <th>主机别名</th>
                <th>主机名</th>
                <th>IP地址</th>
                <th>可登录用户名</th>
                <th>登录方式</th>
                <th>编辑</th>
                <th>删除</th>
                <th>登录</th>
            </tr>
            </thead>
            <tbody>
            {% for host in hosts %}
                <tr>
                    <th scope="row">{{ host.id }}</th>
                    <td>{{ host.hostalias }}</td>
                    <td>{{ host.hostname }}</td>
                    <td>{{ host.ip }}</td>
                    <td>{{ host.username }}</td>
                    <td>{{ host.mode }}</td>
                    <td>
                        <button type="button" class="btn btn-warning">修改</button>
                    </td>
                    <td>
                        <button type="button" class="btn btn-danger">删除</button>
                    </td>
                    <td>
                        <button type="button" class="btn btn-primary" onclick="linkHost({{ host.pk }})">登录
                        </button>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
{% endblock Mybody %}
{% block Myjs %}
    <script>
        function linkHost(pk) {
            window.location.href = "/host/like?id=" + pk
        }
    </script>
{% endblock Myjs %}